<template>
  <div class="toolsBar" id="toolsBar">
    <a-button type="primary" style="float:left; position: absolute; right: -45px;top:4px;" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </a-button>
    <a-menu
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      :default-selected-keys="[$route.path]"
    >
      <a-menu-item key="/mainPage/stuManage">
        <nuxt-link to="/mainPage/stuManage"><a-icon type="pie-chart" />
        <span>学生信息管理</span></nuxt-link>
      </a-menu-item>
      <a-menu-item key="/mainPage/clockIn">
        <nuxt-link to="/mainPage/clockIn"><a-icon type="desktop" />
        <span>&nbsp;&nbsp;&nbsp;报寝记录&nbsp;&nbsp;&nbsp;</span></nuxt-link>
      </a-menu-item>
      <a-menu-item key="/mainPage/monitor">
        <nuxt-link to="/mainPage/monitor"><a-icon type="inbox" />
        <span>&nbsp;&nbsp;&nbsp;监控查看&nbsp;&nbsp;&nbsp;</span></nuxt-link>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="mail" /><span>&nbsp;&nbsp;学生消息&nbsp;&nbsp;</span></span>
        <a-menu-item key="/mainPage/privateTalk">
          <nuxt-link to="/mainPage/privateTalk">私信</nuxt-link>
        </a-menu-item>
        <a-menu-item key="/mainPage/warning">
          <nuxt-link to="/mainPage/warning">警报</nuxt-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="appstore" /><span>&nbsp;&nbsp;扩展功能&nbsp;&nbsp;</span></span>
        <a-menu-item key="/mainPage/pipeFix">
          <nuxt-link to="/mainPage/pipeFix">水管维修</nuxt-link>
        </a-menu-item>
        <a-menu-item key="/mainPage/elecFix">
          <nuxt-link to="/mainPage/elecFix">电路维修</nuxt-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      recent: 'sub1',
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      let obj = document.getElementById("toolsBar");
      if(obj.className=="toolsBar") obj.className="toolsBar_1";
      else obj.className = "toolsBar";
    },
  },
};
</script>

<style lang="scss" scoped>
.toolsBar{
    position: fixed;
    z-index: 101;
    left: 0;
    top: 9.93%;
    width: 18%;
    height: 90.07%;
    background-color: rgba(10, 38, 66, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    font-family: Roboto;
    display:block;
    transition: 0.2s;
}
.toolsBar_1{
    position: fixed;
    z-index: 101;
    left: 0;
    top: 9.93%;
    width: 80px;
    height: 90.07%;
    background-color: rgba(10, 38, 66, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    font-family: Roboto;
    display:block;
    transition: 0.2s;
}

</style>